<template>
  <div style="height: 300px; width: 300px">
    <div :id="divId" style="width: 300px; height: 300px"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import uniqueId from "lodash.uniqueid";

type EChartsOption = echarts.EChartsOption;
const props = withDefaults(
  defineProps<{
    eChartsOption: EChartsOption;
  }>(),
  {}
);
const renderEchart = () => {
  try {
    console.log("props.eChartsOption", props.eChartsOption);
    if (props.eChartsOption.series[0].data[0].value.length < 3) return;
    const chartDom = document.getElementById(divId);
    const myChart = echarts.init(chartDom);
    props.eChartsOption && myChart.setOption(props.eChartsOption);
  } catch (error) {
    console.log(error);
  }
};
const divId = uniqueId("radar");
watch(
  () => props.eChartsOption,
  () => {
    nextTick(() => {
      renderEchart();
    });
  },
  { deep: true, immediate: true }
);
// watchEffect(() => {
//   nextTick(() => {
//     renderEchart();
//   });
// });
</script>

<style lang="less" scoped></style>
